<template>
  <div class="bannerImg" @click="quit">
    <div class="wapper">
        <swiper :options="swiperOption">
          <!-- slides -->
          <swiper-slide v-for="(item, index) of Bannerimg" :key="index">
            <img class="img" :src="item.Url">
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
  </div>
</template>
<script>
export default{
  name: 'bannerImg',
  props: {
    Bannerimg: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        observer: true,
        observeParents: true
      }
    }
  },
  methods: {
    quit () {
      this.$emit('change')
    }
  }
}
</script>
<style lang="stylus" scoped>
  .bannerImg >>> .swiper-container
    overflow inherit
  .bannerImg
    z-index 999
    display flex
    flex-direction column
    justify-content center
    align-items center
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    background #000000
    .wapper
      height 0
      width 100%
      padding-bottom 100%
      line-height 375px
      .img
        width 100%
        // height 375px
      .swiper-pagination
        color white
        bottom -6rem
</style>
